<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
{#    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.css" />#}
    <title></title>
</head>
<body>
    <form action="/user_list/" method="post">
        <p>用户类型：{{ obj.user_type }}<span>{{ errors.user_type }}</span></p>
        <p>主机：{{ obj.host }}<span>{{ errors.host }}</span></p> <!--obj是创建form类的实例化对象，host是变量-->
        <p>端口：{{ obj.port }}<span>{{ errors.port }}</span></p>
        <p>邮箱：{{ obj.email }}<span>{{ errors.email }}</span></p>
        <p>手机：{{ obj.mobile }}<span>{{ errors.mobile }}</span></p>
        <input type="submit" value="submit">
    </form>

    <table border="1">
        <thead>
            <tr>
                <th>主机</th>
                <th>端口</th>
            </tr>
        </thead>
        <tbody id="tbd">
            <tr>
                <td>1.1.1.1</td>
                <td>111</td>
            </tr>
            <tr>
                <td>2.2.2.2</td>
                <td>222</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="ajax提交" onclick="AjaxSubmitSet();">
    <!--数据应该从标签里获取，这里就不做了，设定了几个值提交。-->
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
function AjaxSubmitSet(){
    var hosts=[{'ip':'1.1.1.1','port':'111'},{'ip':'2.2.2.2','port':'222'}];
    $.ajax({
        url:'/ajax_data_set/',
        type:'POST',
        tradition:true,
        data:{data:JSON.stringify(hosts)},
        success: function (arg) {
            //返回值是字符串，把它先转化成字典
            //相当于json.loads()，parseJSON将字符串转换成对象
            var callback_dict= $.parseJSON(arg);
            if(callback_dict.status){
                alert('成功');
            }else{
                alert(callback_dict.error);
            }
        }
    });
}
    </script>
</body>
</html>